<template>
    <div>
        <el-button type="primary" @click="back()">返回</el-button>
        <el-divider></el-divider>
        商品标题：
        <el-input v-model="ob.title" placeholder="请输入内容"></el-input>
        <div style="margin: 15px auto;">
            请选择种类：
        <el-select v-model="ob.type" placeholder="请选择">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        </div>
        商品价格：
        <el-input v-model="ob.price" placeholder="请输入内容"></el-input>
        商品描述：
        <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="ob.desc"
                maxlength="30"
                show-word-limit
                resize="none"
        >
        </el-input>
        添加图片：
        <el-upload
                class="avatar-uploader"
                action=""
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :on-change="handleChange"
                :before-upload="beforeAvatarUpload"
        >
            <img v-if="ob.imgUrl" :src="ob.imgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div style="text-align: center;margin-top: 20px;">
            <el-button type="primary" @click="sub()">提交</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "goodUpdate",
        data() {
            return {
                options:
                  [
                      {value:1,label:"猫咪"},{value:2,label:"小狗"},{value:3,label:"兔子"},{value:4,label:"乌龟"}
                  ]
                ,
                ob: {
                    id: 0,
                    title: "",
                    price: 0,
                    imgUrl: "",
                    desc: ""
                },
                file: {}
            }
        },
        props: [],
        methods: {
            initData() {
                console.log(this.$route.query.id)
                this.id = this.$route.query.id
                console.log(this.id)
            },
            initTable() {
                if (this.id !== 0) {
                    this.$http.get("goods/detail", {
                        params: {
                            id: this.id
                        }
                    }).then(data => {
                        if (data.data.code === 100000) {
                            this.ob = data.data.data;
                        }
                    })
                }
            },
            back() {
                this.$router.go(-1)
            },
            handleChange(file) {
                console.log("123123")
                this.file = file
                this.upload()
            },
            handleAvatarSuccess(res, file) {
                this.upload(file)
                this.imgUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            sub() {
                this.$http.post('goods/insert',
                    this.ob
                ).then(data => {
                    if (data.data.code === 100000) {
                        this.$message.success("提交成功")
                    }
                })
            },
            upload() {
                console.log("开始")
                var COS = require('cos-js-sdk-v5');
                var cos = new COS({
                    SecretId: 'AKID2oSvBD7bz7yax4QYxCIE2d0LQL4hM9Zm',
                    SecretKey: 'pVxwkOnzwmQt783jEbmCOQUsSo47vUoE',
                })
                cos.putObject({
                    Bucket: 'diary-1259047994',
                    Region: 'ap-chongqing',
                    Key: this.file.name,
                    StorageClass: 'STANDARD',
                    Body: this.file.raw,
                    onProgress: function (progressData) {
                        console.log(JSON.stringify(progressData))
                    },
                }).then(data => {
                    if (data.statusCode === 200) {
                        this.ob.imgUrl = "http://" + data.Location
                    }
                    console.log(data.Location)
                })
            }

        },
        created() {
            this.initData();
            this.initTable();
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>